<template>
    <div class="slideshowBox">
        <div class="slideshow">
            <el-carousel height="288px">
                <el-carousel-item v-for="item in imgUrl1" :key="item">
                    <img :src="item.url" alt="图片无法显示">
                    <div class="goDetail">
                        <button>查看详情</button>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="slideshow">
            <el-carousel height="288px">
                <el-carousel-item v-for="item in imgUrl2" :key="item">
                    <img :src="item.url" alt="图片无法显示">
                    <div class="goDetail">
                        <button>查看详情</button>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
    <div class="choiceBox">
        <div class="tabBox">
            <li :class="{ 'chooseTab': chooseInd == 0 }" @click="chooseInd = 0">全部</li>
            <li :class="{ 'chooseTab': chooseInd == 1 }" @click="chooseInd = 1">审批中</li>
            <li :class="{ 'chooseTab': chooseInd == 2 }" @click="chooseInd = 2">审批完成</li>
        </div>
        <div class="search">
            <input type="text" name="search" class="searchCon" placeholder="请输入关键词">
            <button @click="search" @keyup.enter="search"></button>
        </div>
    </div>
    <div class="result">
        <div class="resSum">
            共搜索到{{ total }}条数据
        </div>
        <div class="resultB">
            <div class="addClass" @click="goAddCourse">
                <img src="../../assets/images/teacher/myCourse/add.svg" alt="添加课程">
            </div>
            <!-- <card @click="router.push('/EditCourseInfo/38')">
                <template #courseName>
                    测试样例
                </template>
                <template #intro>
                   aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </template>
                <template #state>
                    待审批
                </template>
                <template #date>
                    2016-12-12
                </template>
            </card> -->
            <card v-for="(item, index) in tData" @click="router.push('/EditCourseInfo/' + item.courseId)"
                :state="getState(item.endDate.split(' ')[0], item.isPass)">
                <template #courseName>
                    {{ item.courseName }}
                </template>
                <template #intro>
                    {{ item.courseIntroduction }}
                </template>
                <template #state>
                    {{ getState(item.endDate.split(' ')[0], item.isPass) == 1 }}
                </template>
                <template #date>
                    {{ item.endDate.split(' ')[0] }}
                </template>
            </card>
        </div>
        <Pagination ref="pageData" @changePage="changePage" />
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, watch } from 'vue';
import { useRouter } from 'vue-router'
import { getUserData } from '../../utils';
import card from '../../components/CourseCard.vue'
import img1 from '../../assets/images/teacher/myCourse/project1.jpg'
import img2 from '/src/assets/images/teacher/myCourse/project2.jpg'
import img3 from '/src/assets/images/teacher/myCourse/project3.jpg'
import img4 from '../../assets/images/teacher/myCourse/project4.jpg'
import img5 from '../../assets/images/teacher/myCourse/project5.jpg'
import img6 from '../../assets/images/teacher/myCourse/project6.jpg'
import Pagination from '../../components/Pagination.vue'


const http = getCurrentInstance()?.appContext.config.globalProperties.$http


// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}
console.log(userData);

const router = useRouter();
//轮播图的图片
const imgUrl1 = [{ url: img1 }, { url: img2 }, { url: img3 }, { url: img4 }];
const imgUrl2 = [{ url: img3 }, { url: img4 }, { url: img5 }, { url: img6 }];

//得到审批数据
const dataNum = ref(0);

//选择选项卡
const chooseInd = ref(0);

watch(() => chooseInd.value, () => {
    changePage({
        current: 1,
        pageSize: 5
    })
    console.log(chooseInd.value);
})


//搜索
const search = function () {

}

//添加课程
const goAddCourse = function () {
    router.push('/AddCourse')
}

//分页
const pageData = ref()

// 得到课程总数量
const total = ref(0)

//得到课程
//放到表格的数据
const tData = ref()

//得到课程状态
const current = new Date()
const year = current.getFullYear()
const month = current.getMonth()
const date = current.getDate()

const getState = function (item, isPass) {
    if (isPass) {
        return '已审核'
    }
    let d = item.split('-')
    if (d[0] < year || d[1] < month || d[2] < date) {
        return '已失效'
    }
    return '未审核'
}

const changePage = function (pd) {

    // 加上筛选信息
    let filter = ''

    if (chooseInd.value == 1) {
        filter = '&isVerify=0'
    } else if (chooseInd.value == 2) {
        filter = '&isVerify=1'
    }

    //得到课程信息
    fetch(http + '/admin/major/course?' + 'current=' + pd.current + '&pageSize=' + pd.pageSize + filter, {
        method: 'get',
        headers: {
            "Token": userData.Token,
            'Content-Type': 'application/json; charset=utf-8'
        },
        responseType: 'json',
    }).then((response) => {
        return response.json()
    }).then((data) => {
        data = data.data
        //生成分页
        pageData.value.changePage(data)
        tData.value = data.records
        total.value = data.total
    }).catch((err) => {
        console.log(err);
    })
}

</script>
<style scoped>
.slideshowBox {
    width: 100%;
    height: 277px;
    display: flex;
    justify-content: space-between;
}

.slideshow {
    width: 46%;
    height: 100%;
}

.goDetail{
    width: 100%;
    height: 61px;
    position: absolute;
    background-color: #ffffff;
    bottom: 0px;
    opacity: 0.6;
}

.goDetail button{
    width: 120px;
	height: 30px;
	background-color: #ffffff;
	border-radius: 6px;
	border: solid 1px #707070;
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    font-family: Source Han Sans CN;
	font-size: 13px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #707070;
}


.slideshow img {
    width: 100%;
    height: 228px;
    display: block;
}

.choiceBox {
    display: flex;
    justify-content: space-between;
    margin-top: 5.2%;
    height: 5.2%;
    width: 100%;
}

.search {
    width: 45%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(182, 119, 119, 0.16);
    border-radius: 6px;
    display: flex;
    box-sizing: content-box;
}

.searchCon {
    width: 90%;
    height: 100%;
    border: 0px solid;
    border-radius: 6px;
    outline: none;
    padding: 2%;
    padding-left: 4%;
    font-size: 1em;
}


.search button {
    width: 9%;
    color: white;
    height: 100%;
    background-color: white;
    border: 0px solid;
    outline: none;
    cursor: pointer;
    border-radius: 6px;
    background: url(../../assets/images/teacher/myCourse/search.svg) no-repeat left center;
    background-size: 68%;
}

.tabBox {
    width: 42%;
    height: 100%;
    display: flex;
    align-items: center;
    border: solid 0px #8493a6;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
}

.tabBox li {
    width: 30%;
    list-style: none;
    display: flex;
    height: 100%;
    justify-content: center;
    cursor: pointer;
    font-family: Source Han Sans CN;
    font-size: 1.1em;
    font-weight: normal;
    font-stretch: normal;
    align-items: center;
    letter-spacing: 0px;
    background-color: white;
    color: #707070;
    border: solid 1px #8493a6;
    flex: 1;
}

.chooseTab {
    background-color: #8493a6 !important;
    color: white !important;
    transition: 0.2s;
}

.resSum {
    width: 100%;
    height: 36px;
    font-size: 1em;
    line-height: 36px;
    color: #707070;
    margin-bottom: -3%;
    margin-top: 1%;
}

.resultB,
.result {
    width: 103%;
    float: left;
    margin-bottom: 4%;
}

.addClass,
.resultData {
    width: 27%;
    height: 151px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
    background-color: #ffffff;
    box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    min-width: 200px;
}

.addClass {
    cursor: pointer;
    float: left;
    margin-right: 6.3%;
}

.addClass img {
    opacity: 0.9;
    height: 48%;
}

.resultDetail {
    width: 100%;
    height: 74%;
    display: flex;
    padding-left: 7%;
    padding-top: 7%;
    padding-bottom: 3%;
}


.projectPic {
    width: 23%;
    height: 100%;
    /* background-color: pink; */
    justify-content: center;
    align-items: center;
    min-width: 62px;
}

.projectPic img {
    width: 78%;
    height: 50%;
}

.detail {
    height: 100%;
    width: 77%;
    padding-right: 5%;
}

.projectName {
    font-family: Source Han Sans CN;
    font-size: 1.1em;
    font-weight: 550;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #707070;
    margin-top: -6.9%;
    line-height: 2.7em;
    /* 不换行 */
    white-space: nowrap;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 文字超出的部分显示为省略号 */
    text-overflow: ellipsis;
    width: 100%;
}

.projectIntro {
    font-size: 0.8em;
    line-height: 0.9em;
    font-family: Source Han Sans CN;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #707070;
    display: flex;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projectIntro p {
    width: 100%;
    word-wrap: break-word;
}

.resultOper {
    width: 100%;
    height: 26%;
    background-color: #dbdde3;
    box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 0px 0px 10px 10px;
    opacity: 0.5;
    display: flex;
    justify-content: space-between;
    padding-left: 3.7%;
    padding-right: 3.7%;
    align-items: center;
}

.left {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 0.7em;
}

.light {
    width: 0.4em;
    height: 0.4em;
    box-sizing: content-box;
    margin-right: 3%;
    background-color: yellow;
    border-radius: 0.2em;
}

.state {
    font-size: 0.8em;
    box-sizing: content-box;
    margin-right: 2.5%;
    margin-top: 0.05%;
}

.right {
    width: 30%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    line-height: 100%;
    cursor: pointer;
}

.pagination {
    margin-top: 3%;
    height: 100px;
}</style>
<style>
.el-carousel__button{
    width: 8px;
	height: 8px;
	background-color: #707070;
	border: solid 1px #707070;
    border-radius: 4px;
	opacity: 0.28;
}
.el-carousel__indicators {
    display: flex;
    justify-content: space-between;
    width: 16%;
}
</style>